<script setup lang="ts">
const props = defineProps({
  newsobj: Object,
})

defineEmits<{ (e: 'detail'): void }>()
</script>

<template>
  <n-card hoverable class="news-item cursor-pointer rounded-4!" @click="$emit('detail', newsobj.newsId)">
    <template #cover>
      <div p="4 b-0" lt-lg="!p-0" class="w-full! overflow-hidden!">
        <!--  object="contain center" -->
        <img class="img h-200px" lt-lg="h-140px" object=" center" :src="newsobj.imgUrl ? getAssetUrl(newsobj.imgUrl) : 'https://30850783.s21i.faiusr.com/2/ABUIABACGAAg_YzJowYohpyj1gQwgAg4qgU!700x700.jpg.webp'">
      </div>
    </template>
    <template #header>
      <div class="title" text="4!" font="bold!">
        <n-ellipsis>
          {{ newsobj.title }}
        </n-ellipsis>
      </div>
    </template>
    <div>
      <div mb-4 lt-lg="mb-2" text-3>
        {{ newsobj.publishTime }}
      </div>
      <div text-14px>
        <n-ellipsis :line-clamp="2" :tooltip="{ contentStyle: { maxWidth: '50vw' } }">
          {{ newsobj.disContent }}
        </n-ellipsis>
      </div>
    </div>
  </n-card>
</template>

<style scoped>
.news-item {
  @media (max-width: 1345px) {
    &>>>.n-card-header{
      padding: 10px 10px 0 10px;
    }
    &>>>.n-card__content{
      padding: 10px;
    }
    &>>>.n-card__footer{
      padding: 10px;
    }
    
  }
  &:hover {
    .title {
      @apply text-primary;
    }

    .img {
      @apply transition-width max-w-auto! w-[120%]!;
  }
}
}
</style>
